<template>
  <div>
    <div id="vditor-outline"></div>
    <div id="vditor-preview"></div>
  </div>
</template>

<script>
import VditorPreview from 'vditor/dist/method.min'
import "vditor/src/assets/less/index.less" // import "vditor/dist/index.css"
import {COLOR_SCHEME_CACHE_KEY, DARK_THEME, LIGHT_THEME, MD_CONTENT} from "@/js/constants"

export default {
  name: "VditorRender",
  data() {
    return {}
  },
  methods: {},
  computed: {
    previewTheme() {
      if (localStorage.getItem(COLOR_SCHEME_CACHE_KEY) === "dark") {
        return DARK_THEME
      } else {
        return LIGHT_THEME
      }
    },
  },
  created() {
  },
  mounted() {
    const previewElement = document.getElementById("vditor-preview")
    const outlineElement = document.getElementById("vditor-outline")
    VditorPreview.preview(previewElement, MD_CONTENT, {
      hljs: {
        lineNumber: true,
        style: this.previewTheme.codeTheme,
      },
      markdown: {
        autoSpace: true,
        fixTermTypo: true,
        toc: true,
        listStyle: true,
        mark: true,
      },
      speech: {
        enable: true
      },
      anchor: 1,
      theme: {
        current: this.previewTheme.contentTheme,
      },
      after: () => {
        if (window.innerWidth <= 768) {
          return
        }
        VditorPreview.outlineRender(previewElement, outlineElement)
      },
      transform: (html) => { // 渲染前
        // const doc = new DOMParser().parseFromString(html, "text/html");
        // console.log(doc)
        return html
      }
    })
  },
}
</script>

<style scoped>

#vditor-outline {
  display: block;
  height: 200px;
  width: 200px;
  border: 1px cornflowerblue solid;
}


html.dark #vditor-outline {
  color: #d1d5da;
}

#vditor-preview {
  width: 600px;
  text-align: left;
  padding: 20px;
  margin: 0 auto;
  border: 1px cornflowerblue solid;
  border-radius: 10px;
}

</style>